<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Material Admin</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- Logo & Information Panel-->
                <div class="col-lg-6">
                    <div class="info d-flex align-items-center">
                        <div class="content">
                            <div class="logo">
                                <h1>欢迎注册</h1>
                            </div>
                            <p>在线作业系统</p>
                        </div>
                    </div>
                </div>
                <!-- Form Panel    -->
                <div class="col-lg-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <div class="form-group">
                                <input id="register-username" class="input-material" type="text" name="registerUsername"
                                       placeholder="请输入用户名">
                                <div class="invalid-feedback">
                                    用户名必须在2~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="register-realname" class="input-material" type="text" name="registerRealName"
                                       placeholder="请输入真实姓名">
                                <div class="invalid-feedback">
                                    真实姓名必须在2~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="register-password" class="input-material" type="password"
                                       name="registerPassword" placeholder="请输入密码">
                                <div class="invalid-feedback">
                                    密码必须在6~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="register-passwords" class="input-material" type="password"
                                       name="registerPasswords" placeholder="确认密码">
                                <div class="invalid-feedback">
                                    两次密码必须相同 且在6~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="verify-wrap" id="verify-wrap"></div>
                            </div>
                            <div class="form-group">
                                <button id="reg-btn" type="button" name="registerSubmit" class="btn btn-default"
                                        disabled="disabled">注册
                                </button>
                            </div>
                            <small>已有账号?</small><a href="login.html" class="signup">&nbsp;登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jq-slideVerify.js" type="text/javascript"
        charset="utf-8"></script>
<script>
    $(function () {
        var SlideVerifyPlug = window.slideVerifyPlug;
        var slideVerify = new SlideVerifyPlug('#verify-wrap', {
            initText: '请按住滑块向右拖动！', //设置  初始的 显示文字
            sucessText: '验证通过!', //设置 验证通过 显示的文字
            getSuccessState: function (res) {
                //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
                console.log(res);
                fullValidata()
            }
        });
        var flagName = false;
        var flagRealName = false;
        var flagPas = false;
        var flagPass = false;


        var reg_username = $("#register-username");
        var reg_realname = $("#register-realname");
        var reg_password = $("#register-password");
        var reg_passwords = $("#register-passwords");
        var reg_btn = $("#reg-btn");

        /*验证用户名*/
        var name, realName, passWord, passWords;
        reg_username.change(function () {
            name = reg_username.val();
            if (name.length < 2 || name.length > 10) {
                reg_username.removeClass("form-control is-valid")
                reg_username.addClass("form-control is-invalid");
                flagName = false;
                $("#name_msg").html("用户名必须在2~10位之间")
            } else {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    // contentType: "application/json;charset=UTF-8",
                    url: "/student/stuvalogName",
                    data: {
                        loginName: name
                    },
                    success: function (data) {
                        console.log(data)
                        console.log(data.flag)
                        if (data.flag) {
                            reg_username.removeClass("form-control is-invalid")
                            reg_username.addClass("form-control is-valid");
                            flagName = true;

                        } else {
                            $("#name_msg").html(data.msg)
                        }
                    }
                });
            }
            slideVerify.resetVerify();
            fullValidata()
        });
        // 验证真实姓名
        reg_realname.change(function () {
            realName = reg_realname.val();
            if (realName.length < 2 || realName.length > 10) {
                reg_realname.removeClass("form-control is-valid")
                reg_realname.addClass("form-control is-invalid");
                flagRealName = false;
            } else {
                reg_realname.removeClass("form-control is-invalid")
                reg_realname.addClass("form-control is-valid");
                flagRealName = true;
            }
            slideVerify.resetVerify();
            fullValidata()
        });
        /*验证密码*/
        reg_password.change(function () {
            passWord = reg_password.val();
            if (passWord.length < 6 || passWord.length > 18) {
                reg_password.removeClass("form-control is-valid")
                reg_password.addClass("form-control is-invalid");
                flagPas = false;
            } else {
                reg_password.removeClass("form-control is-invalid")
                reg_password.addClass("form-control is-valid");
                flagPas = true;
            }
            slideVerify.resetVerify();
            fullValidata()
        });
        /*验证确认密码*/
        reg_passwords.change(function () {
            passWords = reg_passwords.val();
            if ((passWord !== passWords) || (passWords.length < 6 || passWords.length > 18)) {
                reg_passwords.removeClass("form-control is-valid")
                reg_passwords.addClass("form-control is-invalid");
                flagPass = false;
            } else {
                reg_passwords.removeClass("form-control is-invalid")
                reg_passwords.addClass("form-control is-valid");
                flagPass = true;
            }
            slideVerify.resetVerify();
            fullValidata()
        });

        // 全验证
        function fullValidata() {
            if (flagName && flagRealName && flagPas && flagPass && slideVerify.slideFinishState) {
                // 使注册按钮可用
                reg_btn.removeClass("btn btn-default")
                reg_btn.addClass("btn btn-primary")
                reg_btn.removeAttr("disabled");
            } else {
                if (!flagName) {
                    reg_username.addClass("form-control is-invalid");
                }
                if (!flagRealName) {
                    reg_realname.addClass("form-control is-invalid");
                }
                if (!flagPas) {
                    reg_password.addClass("form-control is-invalid");
                }
                if (!flagPass) {
                    reg_passwords.addClass("form-control is-invalid");
                }
                // 使得注册按钮不可用
                reg_btn.removeClass("btn btn-primary");
                reg_btn.addClass("btn btn-default");
                reg_btn.attr("disabled", "disabled");
            }
        }

        // 点击注册按钮
        reg_btn.click(function () {
            if (flagName && flagRealName && flagPas && flagPass && slideVerify.slideFinishState) {
                var teachers = {
                    loginName: name,
                    realName: realName,
                    password: passWords
                };
                console.log(JSON.stringify(teachers))
                $.ajax({
                    type: "post",
                    // dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    url: "/student/stureg",
                    data: JSON.stringify(teachers),
                    success: function (data) {
                        console.log(data)
                        if (data.flag) {
                            window.location.href = '/slogin.html'
                        }
                    }
                });
            } else {

            }
        })
    })
</script>
